import {formatTime} from "../utils/format-utils.ts";
import CommentIcon from "./icon/CommentIcon.tsx";
import PraiseCommentIcon from "./icon/PraiseCommentIcon.tsx";
import {CommentInfo} from "../types/commonTypes.ts";
import MoreIcon from "./icon/MoreIcon.tsx";
import {Dropdown, MenuProps, message} from "antd";
import {useLoginUser} from "../hooks/LoginHooks.tsx";
import copy from 'copy-to-clipboard';

export type CommentItemProps = {
  record: CommentInfo,
  changeSubCommentStatus?: (id: string) => void
  onPraiseComment: (id: string, status: number) => void,
  onDeleteComment: (id: string) => void,
  creator: string
}


export default function ({
                           record,
                           changeSubCommentStatus,
                           onPraiseComment,
                           creator,
                           onDeleteComment
                         }: CommentItemProps) {
  const user = useLoginUser();
  const getMenuItems = (): MenuProps['items'] => {
    const commonItems: MenuProps['items'] = [
      {
        key: '1',
        label: (<div onClick={() => {
          copy(record.content || '');
          message.success('复制成功')
        }} className='comment-item-functions unselectable'>
          复制
        </div>),
      },
    ];
    if (user?.id === record.commenter) {
      commonItems.push({
        label: (<div className='comment-item-functions' onClick={() => {
          onDeleteComment(record.id);
        }}>
          删除
        </div>),
        key: '2',
      })
    }
    return commonItems;
  }
  return (<div className='comment-item' key={record.id}>
    <img className='commenter-header' src={record.commenterAvatar} alt=""/>
    <div className='comment-body'>
      <div className='el-center justify-content--between'>
        <div className='commenter-name'>{record.commenterName}
          {
            record.commenter === creator && <span className='author-tag'>作者</span>
          }
        </div>
        <div className='unselectable'>
          <Dropdown menu={{items: getMenuItems()}}
                    trigger={['click', 'hover']} placement={'bottomRight'}>
            <div>
              <MoreIcon></MoreIcon>
            </div>
          </Dropdown>
        </div>
      </div>

      <div className='comment-content'>{record.content}</div>
      <div className='comment-bottom'>
        <div className='etc-info'>{formatTime(Number(record.gmtCreate))}</div>
        <div className='comment-comment unselectable'>
          {
            changeSubCommentStatus ? <div className='el-center' onClick={() => {
              changeSubCommentStatus?.(record.id)
            }}>
              <CommentIcon/>
              <span className={'comment-reply'}>回复</span>
            </div> : ''
          }
          <div className={record.likedStatus === 1 ? 'praise-color--red el-center' : 'el-center'}
               onClick={() => onPraiseComment(record.id, record.likedStatus || 0)}>
            <PraiseCommentIcon/>
            <span className={record.likedStatus === 1 ? 'praise-color--red' : ''}>{record.likeCount}</span>
          </div>
        </div>
      </div>
    </div>
  </div>)
}